jQuery(function ($) {

    var extractFileName = function(path) {
        var idx = path.lastIndexOf("/");
        if (idx != -1) {
            return path.substring(idx + 1, path.length);
        return path;
        }
    };

    var HierarchyTreeItem = Spine.Controller.create({
        elements: { 
            ".popup" : "popup"
        },
        events: {
            "click": "click",
            "mouseover": "mouseover",
            "mouseout": "mouseout"
        },

        render: function (item) {
            if (item) this.item = item;            
            this.el.html(this.template(this.item, this.isRootItem));
            this.addAll();
            return this;
        },

        init: function () {   
            
        },

        template: function (item, isRootItem) {
            if (isRootItem)
                return ($("#hierarchyTreeItemTemplate").tmpl(item));
            return ($("#hierarchyTreeSubItemTemplate").tmpl(item));
        },

        click: function () {
            this.App.trigger("pathChanged", "hierarchyTreeItem", this.item.path);
        },

        mouseover: function () {
                this.el.addClass("active");                            
        },

        mouseout: function () {
             this.el.removeClass("active");
        },

        addOne : function(item) {                                                  
            var hierarchyModel = { label: extractFileName(item.path), path: item.path, last: false };
            var hierarchyItem = HierarchyTreeItem.init({item: hierarchyModel, last: false, isRootItem: false});
//            hierarchyItem .render();
            
            $(".popup", this.el).append(hierarchyItem.render().el);
            
//            console.log(item.path);
        },

        addAll : function() {
            $(".popup", this.el).empty();
            
            if (this.isRootItem == true && this.item != undefined && this.item.path != undefined) {
                if (this.entryList == undefined || this.entryList.path == undefined) {
                    //not load, load now.
                    this.entryList = Cofe.Models.EntryList.lookupOrCreate(this.item.path, this.addAll, this.ajaxErr);
                }
                if (this.entryList.folders != undefined) {
                   $.each(this.entryList.folders, this.proxy(function (i, folder) { this.addOne(folder); })) 
                }
             }
        },

        ajaxErr : function (xhr, s, e) {
            console.log("error when fetching " + path)
        },
    });

    var HierarchyTree = Spine.Controller.create({
        elements: {

    },

    events: {

},

proxied: ["addOne", "addAll"],



init: function (path) {
    Cofe.Models.EntryList.fetch();

    this.App.bind("pathChanged", this.proxy(function (sender, path) {
        console.log("HierarchyTree : " + sender + " raised pathChanged " + path);
        this.changePath(path);        
    }));
},

//render: function () {
//    this.el.html($("#hierarchyTreeTemplate").tmpl(this.buildHierarchyTree(this.path)));
//},


changePath: function (path) {
    if (this.path != path) {
        this.path = path;
        this.addAll();
    }
},

    buildHierarchyTree: function (path) {
        var hierarchy = new Array();
        var hierarchyIdx = 0;

        var idx = path.lastIndexOf("/");
        while (idx != -1) {
            var curLabel = path.substring(idx + 1, path.length);
            hierarchy[hierarchyIdx++] = { label: curLabel, path: path, last: false };
            path = path.substring(0, idx);
            idx = path.lastIndexOf("/");
        }
        hierarchy[hierarchyIdx++] = { label: path, path: path, last: false };

        hierarchy[0].last = true;
        return hierarchy.reverse();
    },
    addOne: function (item) {
         var hierarchyItem = HierarchyTreeItem.init({item: item, isRootItem: true});
         this.el.append(hierarchyItem.render().el);
    },
    addAll: function () {
         this.el.empty();
         var items = this.buildHierarchyTree(this.path);            
         $.each(items, this.proxy(function (i, hierarchyInfo) { this.addOne(hierarchyInfo); }))                
    }
});

window.HierarchyTree = HierarchyTree;

})